<template>
  <div>
    <el-cascader
      v-model="addrValue"
      :props="addressProps"
      :options="addrOptions"
      collapse-tags-tooltip
      collapse-tags
      :max-collapse-tags="maxCollapseTags"
      clearable
      :disabled="getAddressOptionsLoading"
      @change="onchange"
    />
  </div>
</template>

<script setup lang="ts" name="MultopleAddress">
  import { ref, onBeforeMount, watch } from 'vue'
  import type { CascaderProps } from 'element-plus'
  import { getPrimaryAddress } from '../../api/address'

  // 获取参数
  const prop = defineProps({
    address: {
      type: Array<{ province: string; city: string; area: string; town: string }>,
      default: [
        {
          province: '',
          city: '',
          area: '',
          town: '',
        },
      ],
    },
    maxCollapseTags: {
      type: Number,
      default: () => 3,
    },
  })

  const addrOptions = ref([]) // 地址对象
  const addrValue = ref([]) // 地址选中的值
  const addrData = ref([]) // 地址选中的名称

  // 地址配置项
  const addressProps: CascaderProps = {
    value: 'code',
    label: 'name',
    children: 'children',
    expandTrigger: 'click' as const,
    multiple: true,
    checkStrictly: true,
  }

  const onchange = () => {
    // getSelectAddr()
  }

  /**
   * 获取选中的地址
   */
  const getSelectAddr = () => {
    addrData.value = []
    if (addrValue.value.length === 0) {
      return addrData.value
    }
    addrOptions.value.map((o) => {
      addrValue.value.map((o1) => {
        const addr = {
          province: '',
          city: '',
          area: '',
          town: '',
        }
        if (o.code === o1[0]) {
          addr.province = o.name
          if (o1.length === 1) {
            addrData.value.push(addr)
            return
          }
          o.children.map((c) => {
            if (c.code === o1[1]) {
              addr.city = c.name
              if (o1.length === 2) {
                addrData.value.push(addr)
                return
              }
              c.children.map((a) => {
                if (a.code === o1[2]) {
                  addr.area = a.name
                  addrData.value.push(addr)
                }
              })
            }
          })
        }
      })
    })
    return addrData.value
  }

  /**
   * 地址回显
   */
  const addrEcho = () => {
    addrValue.value = []
    addrOptions.value.map((o) => {
      prop.address.map((o1) => {
        if (o.name === o1.province) {
          if (o1.city === '') {
            addrValue.value.push([o.code])
            return
          }
          o.children.map((c) => {
            if (c.name === o1.city) {
              if (o1.area === '') {
                addrValue.value.push([o.code, c.code])
                return
              }
              c.children.map((a) => {
                if (a.name === o1.area) {
                  addrValue.value.push([o.code, c.code, a.code])
                }
              })
            }
          })
        }
      })
    })
  }

  /**
   * 获取地址接口
   */
  const getAddressOptionsLoading = ref(false)
  const requestOneAddressApi = async () => {
    addrOptions.value = []
    getAddressOptionsLoading.value = true
    const res = await getPrimaryAddress()
    addrOptions.value = res.data.data.rows
    getAddressOptionsLoading.value = false
  }

  // 监听地址回显
  watch(
    () => prop.address,
    async (value) => {
      await requestOneAddressApi()
      if (value.length === 0 || value[0].province === '') {
        return
      }
      addrEcho()
    },
  )

  onBeforeMount(() => {
    requestOneAddressApi()
  })

  defineExpose({
    getSelectAddr,
  })
</script>

<style lang="scss" scoped>
  :deep(.el-input .el-input__wrapper) {
    height: auto !important;
  }

  :deep(.el-cascader__tags) {
    max-height: 120px !important;
    overflow: auto !important;
  }
</style>
